<template>
  <el-popover
    :show-after="500"
    placement="left-start"
    title="产品等级变动记录"
    width="600"
    @show="open"
  >
    <template #reference>
      <div class="mb-[2px]">
        <el-tooltip class="item" effect="dark" content="产品等级" placement="top">
          <div class="product_level_icon mr-1">
            <svg-icon
              :icon-class="'product_level' + row.product_level"
              class="text-[56px]"
            ></svg-icon>
          </div>
        </el-tooltip>
      </div>
    </template>
    <div class="dialog-content1">
      <vxe-grid ref="tableRef" v-bind="tableOptionsSupplier"></vxe-grid>
    </div>
    <vxe-pager
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageSize"
      :total="page.totalResult"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="pageChange"
    >
    </vxe-pager>
  </el-popover>
</template>

<script setup lang="jsx">
import { getProductLevelLog } from "./api.js";
import { reactive, toRefs } from "vue";

const props = defineProps({
  row: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { row } = toRefs(props);

const data = reactive({
  sku_id: "",
  visible: false,
  page: {
    pageNum: 1,
    pageSize: 10,
    totalResult: 0,
  },
});

const { sku_id, page } = toRefs(data);

const tableRef = ref();
// 打开弹窗
const open = async () => {
  sku_id.value = row.value.id;
  getProductLevelLogList();
};

const getProductLevelLogList = () => {
  tableOptionsSupplier.data = [];
  tableOptionsSupplier.loading = true;
  getProductLevelLog({
    sku_id: sku_id.value,
    ...page.value,
  })
    .then((res) => {
      tableOptionsSupplier.data = res?.data || [];
      page.value.totalResult = res?.total || 0;
    })
    .finally(() => {
      tableOptionsSupplier.loading = false;
    });
};

//分页
const pageChange = () => {
  getProductLevelLogList();
};

const tableOptionsSupplier = reactive({
  round: true,
  height: "350",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [],
  columns: [
    {
      title: "变动前等级",
      field: "before_product_level_text",
    },
    {
      title: "变动后等级",
      field: "after_product_level_text",
    },
    { title: "备注", field: "remark" },
    {
      title: "添加人/时间",
      field: "create_user_text",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>{row.created_user_text}</div>
              <div>{row.created_at}</div>
            </div>
          );
        },
      },
    },
  ],
});
</script>
<style></style>
